<template>
<div class="form-group">
  <label class="labelSize"><span class="required" v-if="required">*</span>{{title}}：</label>
  <div class="item" v-if="!upTable">
    <div class="checkbox-item">
      <label v-for="option in options">
        <input type="checkbox" :disabled="disabled" :name="name" v-model="value" :id="name" :value="option.value">{{option.key}}
      </label>
    </div>
  </div>
</div>
</template>
<style scoped>
.item>div>label {
  width: auto;
  padding-right: 10px;
  /*margin-left: 2px;*/
  margin-top: auto;
  margin-bottom: auto;
}

</style>

<script>
import {
  randomId
} from "root/imports/ui/collections/general";

export default {
  data: () => ({
    id: randomId()
  }),
  computed: {
    colSm() {
      if (!this.upTable) {
        return "col-sm-" + this.left
      } else {
        return ""
      }
    },
    right() {
      return 12 - this.left
    }
  },
  props: {
    title: {
      type: String
    },
    name: String,
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    left: {
      type: String,
      default: 2
    },
    required: {
      type: Boolean,
      default: false
    },
    upTable: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    reset() {
      this.value = "";
    }
  }
}
</script>
